import React, { ReactNode, useEffect, useState } from "react";
import { useNavigate } from "react-router-dom";
import {
  Button,
  Form,
  Input,
  Modal,
  message,
} from "antd";
import {
  CloseOutlined,
  InboxOutlined,
  ExclamationCircleFilled,
  DownOutlined
} from "@ant-design/icons";
import { useDispatch } from "react-redux";
import { $get, $post } from "@/api/RestUtils";
import "./index.less";

function index() {

  const repoList = [
    {
      id: 1,
      name: "个人知识库1231231543啊实打实打算2312打发撒旦",
      description: "个人知识库1个人知识库1个人知识库1个人知识库1个人知识库1个人知识库1个人知识库1个人知识库1个人知识库1个人知识库1个人知识库1个人知识库1个人知识库1个人知识库1个人知识库1个人知识库1个人知识库1个人知识库1个人知识库1个人知识库1个人知识库1",
      updateTime: "2025-07-22 13:00:12"
    },
    {
      id: 2,
      name: "企业知识库1",
      description: "企业知识库1",
      updateTime: "2025-07-22 13:00:12"
    },
    {
      id: 3,
      name: "企业知识库12",
      description: "企业知识库12",
      updateTime: "2025-07-22 13:00:12"
    },
    {
      id: 4,
      name: "企业知识库13",
      description: "企业知识库13",
      updateTime: "2025-07-22 13:00:12"
    },
    {
      id: 5,
      name: "个人知识库12",
      description: "个人知识库12",
      updateTime: "2025-07-22 13:00:12"
    },
    {
      id: 6,
      name: "个人知识库13",
      description: "个人知识库1",
      updateTime: "2025-07-22 13:00:12"
    },
    {
      id: 7,
      name: "2",
      description: "个人知识库123",
      updateTime: "2025-07-22 13:00:12"
    },
    {
      id: 8,
      name: "个人知识库121",
      description: "用于总结个人英语阅读经验",
      updateTime: "2025-07-22 13:00:12"
    },
    {
      id: 9,
      name: "个人知识库1124",
      description: "个人知识库1",
      updateTime: "2025-07-22 13:00:12"
    },
    {
      id: 10,
      name: "个人知识库1236612",
      description: "个人知识库1",
      updateTime: "2025-07-22 13:00:12"
    },
    {
      id: 11,
      name: "个人知识库1655",
      description: "个人知识库1",
      updateTime: "2025-07-22 13:00:12"
    },
    {
      id: 12,
      name: "个人知识库1",
      description: "个人知识库11413",
      updateTime: "2025-07-22 13:00:12"
    },
    {
      id: 9,
      name: "个人知识库1124",
      description: "个人知识库1",
      updateTime: "2025-07-22 13:00:12"
    },
    {
      id: 10,
      name: "个人知识库1236612",
      description: "个人知识库1",
      updateTime: "2025-07-22 13:00:12"
    },
    {
      id: 11,
      name: "个人知识库1655",
      description: "个人知识库1",
      updateTime: "2025-07-22 13:00:12"
    },
    {
      id: 12,
      name: "个人知识库1",
      description: "个人知识库11413",
      updateTime: "2025-07-22 13:00:12"
    }
  ]

  useEffect(() => {

  }, []);

  const deleteConfirm = (id) => {
    Modal.confirm({
      title: '是否删除当前知识库?',
      icon: <ExclamationCircleFilled />,
      okText: '确认',
      okType: 'primary',
      cancelText: '取消',
      onOk() {
        console.log('OK');
      }
    });
  }

  const deleteRepo = (id) => {
    // 删除知识库
  }

  const renderRepo = () => {
    return repoList.map(item => {
      return (<div className="repo-item">
        <div className="header">
          <div className="title">{item.name}</div>
          <div className="delete" onClick={() => deleteConfirm(item.id)}>
            <CloseOutlined />
          </div>
        </div>
        <div className="descrpition">{item.description}</div>
        <div className="footer">
          <div className="claim">由fantastic-ui提供</div>
          <div className="date">更新于 {item.updateTime}</div>
        </div>
      </div>)
    })
  }

  return (
    <div className="repo-area">
        {renderRepo()}
    </div>
  )
    
}

export default index;
